<template>
  <div class="container">
    <!-- 展示歌曲标题、作者以及主页和搜索功能 -->
    <div class="header">
        <router-link to="/" tag="i" class="iconfont icon-home"></router-link>
      <div class="title">
        <p class="item">{{ currentUrl.songinfo.title }}</p>
        <p class="author">{{ currentUrl.songinfo.author }}</p>
      </div>
      <router-link tag="i" to="/search" class="iconfont icon-sousuo"></router-link>
    </div>
    <!-- 实现图片、歌词、收藏和下载功能 -->
    <div class="content">
      <div class="song_info">
        <img :src="currentUrl.songinfo.pic_big" alt="">
        <div class="song_lrc">
          <LRC :currentTime="currentTime" :durationTime="durationTime" :songid="this.$route.params.songid" />
        </div>
      </div>
      <div class="iconbox">
        <i class="iconfont icon-aixin"></i>
        <!-- 音乐播放器 -->
        <div class="song">
          <audio ref="player" class="audio_css" :src="currentUrl.bitrate.show_link" autoplay controls></audio>
        </div>
        <i class="iconfont icon-xiazai"></i>
      </div>
    </div>
  </div>
</template>

<script>
import '../assets/css/iconfont.css'
// import LRC from '../components/LRC'
// 异步操作
import Vue from 'vue'
const LRC = Vue.component("lrc",(resolve) => require(["../components/LRC"],resolve))

  export default {
    name:'musicplay',
    components:{
      LRC
    },
    data(){
      return{
        //第一次加载初始化
        currentUrl:{
          songinfo:{
            title:"",
            author:""
          },
          bitrate:{
            show_link:""
          }
        },
        currentTime:0,
        durationTime:0
      }
    },
    mounted(){
      //动态获取传来的songid  this.$route.params.songid
      let url = this.HOST + '/v1/restserver/ting?method=baidu.ting.song.play&songid=' + this.$route.params.songid
      this.$axios.get(url)
        .then(res => {
          this.currentUrl = res.data
        })
        .catch(error => {
          console.log(error)
        })
      this.addEventListeners();
    },
    methods:{
      addEventListeners(){
        //timeupdate监听播放时间
        this.$refs.player.addEventListener('timeupdate',this._currentTime),
        //canplay监听播放的整体时间
        this.$refs.player.addEventListener('canplay',this._durationTime)
      },
      removeEventListeners(){
        this.$refs.player.removeEventListener('timeupdate',this._currentTime),
        this.$refs.player.removeEventListener('canplay',this._durationTime)
      },
      // currentTime是audio标签提供的获取当前播放时间的方法
      _currentTime(){
        this.currentTime = this.$refs.player.currentTime
      },
      // duration 是audio标签提供的获取歌曲播放整体时间的方法
      _durationTime(){
        this.durationTime = this.$refs.player.duration
      }
    },
    //组件销毁前移除它
    beforeDestroy () {
      this.removeEventListeners();
    }
  }
</script>

<style scoped>
/* 10px = 2.5% */
.container{
  width: 100%;
  height: 100%;
}

.header{
  width: 100%;
  height: 40px;
  margin-top: 5%;
  display: flex;
}

.iconfont{
  font-size: 2rem;
}

.icon-home, .icon-aixin{
  padding-left: 5%;
}

.icon-sousuo, .icon-xiazai{
  float: right;
  padding-right: 5%
}

.icon-aixin, .icon-xiazai{
  padding-top: 2.5%
}

.item{
  font-size: 1.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.title{
  height: 10%;
  width: 75%;
  text-align: center
}

.author{
  margin-top: 2.1%;
  font-size: 1rem
}

.content{
  width: 100%;
  height: 100%;
  margin-top: 5%;
}

.content img{
  width: 85%;
  height: 85%;
  margin-left: 7.5%
}

.song_lrc{
  height: 100%;
  width: 90%;
  margin-top: 5%;
  margin-left: 5%;
  text-align: center
}

.iconbox{
  display: flex;
  width: 100%;
  height: 100%;
}

.song{
  width: 100%;
  height: 100%;
}

.audio_css{
  width: 100%
}

</style>